<template>
  <Header title="账号登录"/>
  <div>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field v-model="sign" disabled label="个性签名" placeholder="个性签名" />
    <van-field v-model="pass" label="密码" placeholder="请输入密码" />
  </div>
  <van-button type="primary" color="#ffc400" block class="save-btn" @click="save" round>保存</van-button>
  <van-button type="primary" color="#ffc400" block class="save-btn" @click="logOut" round>退出登录</van-button>
</template>

<script setup>
import Header from "@/components/Header.vue";
import router from "@/router";
import { reactive, toRefs } from "@vue/reactivity";
import { showToast, Toast } from "vant";
const data=reactive({
  name:'',
  sign:'战胜自己是命运的强者',
  pass:''
})
const save=()=>{
  if (data.name&&data.pass) {
    let userInfo=JSON.parse(localStorage.userInfo)
    let newUserInfo={
      user:data.name||userInfo.name,
      pass:data.pass||userInfo.pass
    }
    localStorage.setItem('userInfo',JSON.stringify(newUserInfo))
    showToast('修改成功')
    router.push('/mine')
  
  } else{
    showToast('请输入内容')
  }
}
const logOut=()=>{
  localStorage.removeItem('isLogin')
  router.push('/login')
  showToast('退出成功')
}
const {name,sign,pass} =toRefs(data)
</script>

<style lang="less" scoped>
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>